<template>
  <div class="hm-article">
    <h2><span style="color: #000000;"><span style="color: #000000;">requestAnimationFrame<br></span></span></h2>
    <p>&nbsp;</p>
    <p><span style="color: #000000;"><span style="color: #000000;">这个函数与settimeout很相似,但它是专门为动画而生的.settimeout经常被用来做动画.我们知道动画达到60帧,用户就无法感知画面间隔.每一帧大约16毫秒.而<span style="color: #000000;"><span style="color: #000000;">requestAnimationFrame</span></span>的帧率刚好是这个频率.除此之外相比于settimeout,还有以下的一些优点:</span></span></p>
    <p style="color: #000000;">&nbsp;</p>
    <ul>
      <li style="color: #000000;">requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，<span style="background-color: #ffff99;">在一次重绘或回流中就完成</span>，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧,每帧大约16毫秒.</li>
      <li style="color: #000000;"><span style="color: #000000;"><span style="color: #000000;">在<span style="background-color: #ffff99;">隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流</span>，这当然就意味着更少的的cpu，gpu和内存使用量。</span></span></li>
      <li style="color: #000000;"><span style="color: #000000;"><span style="color: #000000;">但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并<span style="background-color: #ffff99;">且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销</span>。</span></span></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
